import { DownOutlined, PlusOutlined, LinkOutlined  } from '@ant-design/icons';
import { Button, Divider, Space, Tag, message } from 'antd';
import React, { useState, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem, FormValueType } from './data.d';
import { queryDevice, updateDevice, addDevice, removeDevice } from './service';


const valueEnum = {
  0: { text: '正常', color: '#324fab' },
  1: { text: '离线', color: '#5278a9' },
  2: { text: '报警', color: '#c9ab6d' },
  3: { text: '报警', color: '#c9ab6d' },
}

const TableList: React.FC<{}> = () => {

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: 'ID',
      dataIndex: 'status',
    },
    {
      title: '用户组',
      dataIndex: 'key',
      valueEnum: {
        0: { text: '系统管理员' },
        1: { text: '车间主任'},
        2: { text: '操作员' },
        3: { text: '科室主管' },
      },
    },
    {
      title: '权限',
      dataIndex: 'col2',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <a href="">删除</a>
        </>
      ),
    },
  ];

  return (
      <ProTable<TableListItem>
        headerTitle=""
        actionRef={actionRef}
        rowKey="key"
        search={false}
        toolbar={{
          title: '',
          search: {
            onSearch: (value: string) => {
              
            },
          },
          actions: [
            <Button
              key="key"
              type="primary"
              onClick={() => {
                
              }}
            >
              添加
            </Button>,
          ],
        }}
        toolBarRender={(action, { selectedRows }) => [
          <Button icon={<LinkOutlined />} type="primary" onClick={() => {}}>
            导出
          </Button>,
        ]}
        tableAlertRender={false}
        request={(params) => queryDevice(params)}
        columns={columns}
        rowSelection={{}}
      />
  );
};

export default TableList;
